<template>
  <!-- 终端门店自理服务工单 -->
  <div class="clientOrder">
    <ContentWrap>
      <FormContainer :column="4">
        <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
          <el-form-item prop="officeCode" label="办事处">
            <SearchSelectPicker
              :url="`/call-center/api/v1/mscInfo/office/ref/page`"
              placeholder="请输入所属办事处"
              method="get"
              lable-name="name"
              value-name="code"
              :value.sync="formData.officeCode"
              @selectChange="formData.disCode = ''"
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="disCode" label="经销商">
            <SearchSelectPicker
              url="/call-center/api/v1/mscInfo/dealer/ref/page"
              method="get"
              placeholder="请输入经销商"
              :params="{query:{officeCode:formData.officeCode},type:0}"
              lable-name="name"
              value-name="code"
              custom-name="codeOrName"
              :parent-id="formData.officeCode"
              :value.sync="formData.disCode"
              clearable
            ></SearchSelectPicker>
          </el-form-item>
          <el-form-item prop="customerName" label="顾客姓名">
            <el-input v-model="formData.customerName" placeholder="请输入顾客姓名" clearable />
          </el-form-item>
          <el-form-item prop="customerTel" label="联系方式">
            <el-input v-model="formData.customerTel" placeholder="请输入联系方式" clearable />
          </el-form-item>
          <el-form-item prop="demandType" label="需求类型">
            <el-select v-model="formData.demandType">
              <el-option label="维修" :value="1" />
              <el-option label="保养" :value="2" />
              <el-option label="安装" :value="3" />
              <el-option label="礼品赠送" :value="4" />
              <el-option label="短信/致电关怀" :value="5" />
              <el-option label="其他服务" :value="6" />
            </el-select>
          </el-form-item>
          <el-form-item prop="repairDate" label="维修日期">
            <el-date-picker
              v-model="formData.repairDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item prop="finishDate" label="完工日期">
            <el-date-picker
              v-model="formData.finishDate"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item prop="createTime" label="创建日期">
            <el-date-picker
              v-model="formData.createTime"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
          <el-form-item :span="24" align="right">
            <Button @click="resetHandle">重置</Button>
            <Button type="primary" enter :loading="loading" @click="queryHandle">查询</Button>
          </el-form-item>
        </el-form>
      </FormContainer>
      <table-box ref="table" no-request :other-filters="filtersParams" :table-config="tableConfig" />
      <ClientOrderEdit ref="clientOrderEdit" />
    </ContentWrap>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import FormContainer from '@/components/FormContainer'
import Button from '@/components/Button'
import ClientOrderEdit from './ClientOrderEdit'
import SearchSelectPicker from '@/components/SearchSelectPicker'
import { deepCopy, parseTime } from '@/utils/'
import { JsonToUrl } from '@/utils/params-format'
export default {
  name: 'ClientOrder',
  components: {
    ContentWrap,
    FormContainer,
    Button,
    ClientOrderEdit,
    SearchSelectPicker
  },
  data() {
    return {
      formData: {
        officeCode: '',
        disCode: '',
        customerName: '',
        customerTel: '',
        demandType: '',
        repairDate: [],
        finishDate: [],
        createTime: []
      },
      formRules: {},
      loading: false,
      filtersParams: [],
      url: '/call-center/api/v1/topInfo/businessAccepted',
      tableConfig: {
        interfacePath: '',
        pageFlag: true,
        hideFuncBar: true,
        // 表格字段动态配置
        setting: [
          {
            prop: 'index',
            label: '序号',
            width: 80,
            align: 'center',
            formatData: (val) => { return val.keyIndex + 1 }
          },
          {
            prop: 'acceptedCode',
            label: '工单编号',
            width: 170
          },
          {
            prop: 'disName',
            label: '经销商',
            width: 170
          },
          {
            prop: 'customerName',
            width: 120,
            label: '顾客姓名'
          },
          {
            prop: 'customerTel',
            width: 120,
            label: '联系方式'
          },
          {
            prop: 'demandTypeName',
            width: 120,
            label: '需求类型'
          },
          {
            prop: 'repairTeacherName',
            width: 120,
            label: '维修技师'
          },
          {
            prop: 'repairDate',
            width: 125,
            label: '维修日期'
          },
          {
            prop: 'handleResultChina',
            width: 125,
            label: '处理结果'
          },
          {
            prop: 'finishDate',
            width: 125,
            label: '完工日期'
          },
          {
            label: '操作',
            width: 80,
            align: 'center',
            button: [{
              name: '详情',
              clickFun: this.detail
            }]
          }
        ]
      }
    }
  },
  mounted() {
    this.tableConfig.interfacePath = `${this.url}`
  },
  methods: {
    // 根据条件查询
    queryHandle() {
      this.loading = true
      this.$refs.form
        .validate()
        .then(() => {
          // FIXME:
          const params = deepCopy(this.formData)
          const { repairDate, finishDate, createTime } = params
          if (Array.isArray(repairDate) && repairDate.length === 2) {
            params.repairDateBegin = parseTime(repairDate[0], '{y}-{m}-{d}')
            params.repairDateEnd = parseTime(repairDate[1], '{y}-{m}-{d}')
          }
          if (Array.isArray(finishDate) && finishDate.length === 2) {
            params.finishDateBegin = parseTime(finishDate[0], '{y}-{m}-{d}')
            params.finishDateEnd = parseTime(finishDate[1], '{y}-{m}-{d}')
          }
          if (Array.isArray(createTime) && createTime.length === 2) {
            params.createTimeBegin = parseTime(createTime[0], '{y}-{m}-{d}')
            params.createTimeEnd = parseTime(createTime[1], '{y}-{m}-{d}')
          }
          delete params.repairDate
          delete params.finishDate
          delete params.createTime
          this.tableConfig.interfacePath = `${this.url}${JsonToUrl(params)}`
          this.$nextTick(() => {
            this.$refs.table.initTableData('onPage')
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 重置表单
    resetHandle() {
      Object.keys(this.formData).forEach(k => {
        this.$set(this.formData, k, '')
      })
    },
    detail(data) {
      this.$refs.clientOrderEdit.openDailog(data)
    }
  }
}
</script>
<style lang='scss' module>
</style>
